<template>
  <div id="forget-PSW">
    <img
      class="logo"
      src="../../assets/images/entrance/logo.png"
      alt="">
    <form action="" id="forget-PSW-form">
      <ul>
        <li>
          <div class="wrap">
            <label for="tel">手机号：</label>
            <input
              type="tel"
              id="tel"
              name="手机号"
              v-model.trim="tel"
              v-validate="'required|tel'">
          </div>
          <span v-show="VeeErrors.has('手机号')">{{ VeeErrors.first('手机号') }}</span>
        </li>
        <li>
          <div class="wrap">
            <label for="code">验证码：</label>
            <input
              type="text"
              id="code"
              name="验证码"
              v-model.trim="code"
              v-validate="'required|numeric'">
            <button
              @click.prevent="getCode"
              :disabled="getCodeBtnPressed"
              :class="{'disable': getCodeBtnPressed}">{{ getCodeBtnText }}</button>
          </div>
          <span v-show="VeeErrors.has('验证码')">{{ VeeErrors.first('验证码') }}</span>
        </li>
        <li>
          <div class="wrap">
            <label for="psw">输入新密码：</label>
            <input
              type="password"
              id="psw"
              name="密码"
              v-model.trim="psw"
              v-validate="'required|alpha_num'">
          </div>
          <span v-show="VeeErrors.has('密码')">{{ VeeErrors.first('密码') }}</span>
        </li>
        <li>
          <div class="wrap">
            <label for="repsw">确认新密码：</label>
            <input
              type="password"
              id="repsw"
              name="确认新密码"
              v-model.trim="repsw"
              v-validate="'required|alpha_num|confirmed:密码'">
          </div>
          <span v-show="VeeErrors.has('确认新密码')">{{ VeeErrors.first('确认新密码') }}</span>
        </li>
      </ul>

      <input
        type="button"
        value="确定"
        :disabled="confirmDisabled"
        @click="confirm">
    </form>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    name: "forget-PSW",
    data() {
      return {
        tel: '',
        code: '',
        psw: '',
        repsw: '',
        getCodeBtnText: '获取验证码',
        getCodeBtnPressed: false,
        confirmDisabled: false
      }
    },
    methods: {
      confirm: function () {
        this.$validator.validateAll().then((result) => {
          if (result) {

            // 1 - form 验证通过

            this.$http.post({
              api: this.$api.USER_MODIFY_PSW,
              params: {
                mobile: this.tel,
                password: this.psw,
                code: this.code
              },
              success: (res) => {

                // 更新个人信息 （与登录一致）tag

                this.$tool.whenToast(
                  () => {

                    // 禁止重复点击确定按钮 （不再处理恢复，路由跳转后组件销毁了）

                    this.confirmDisabled = true;
                  },
                  {
                    message: '修改成功，即将跳转...',
                    duration: -1
                  },
                  () => {

                    // 跳转

                    this.$router.push('/');
                  },2000
                );
              }
            });
          } else {

            // 2 - form 验证不通过

            this.$tool.whenToast(
              () => {

                // 暂时禁用确定按钮

                this.confirmDisabled = true;
              },
              {
                message: '请完善修改信息',
                duration: -1,
                iconClass: 'public-toast-icon error'
              },
              () => {

                // 恢复确定按钮

                this.confirmDisabled = false;
              },2000
            );
          }
        });
      },
      getCode: function () {

        // 先验证是否已填写手机号

        this.$validator.validate('手机号').then((result) => {
          if (result) {

            // 立即置灰

            this.getCodeBtnPressed = true;

            // 请求验证码

            this.$http.post({
              api: this.$api.USER_CODE,
              params: {
                mobile: this.tel
              },
              success: (res) => {

                this.countDown();

                Toast({
                  message: res.data.msg,
                  className: 'public-long-toast',
                  duration: 2000
                });
              },
              failure: (res) => {
                this.countDown();

                Toast({
                  message: res.data.msg,
                  className: 'public-long-toast',
                  duration: 2000
                })
              }
            })
          }
        });
      },
      countDown() {
        // 倒计时

        let seconds = 60;
        this.getCodeBtnText = seconds + 's';
        let countDown = setInterval(() => {
          this.getCodeBtnText = --seconds + 's';

          if (seconds === 0) {
            clearInterval(countDown);

            // 取消置灰

            this.getCodeBtnPressed = false;

            // 恢复提示
            this.getCodeBtnText = '获取验证码';
          }
        }, 1000);
      }
    }
  }
</script>

<style lang="scss">

  #forget-PSW {
    position: fixed;
    width: $size-as-parent;
    height: $size-as-parent;
    background: $white;

    $icon-width: 12px;
    $row-height: 28px;
    $row-font-size: 1.6rem;
    $confirm-height: 3.9rem;

    >.logo {
      width: 14.3rem;
      height: auto;
      margin: 3.9rem auto 6rem;
    }

    >form {
      padding: 0 4.8rem;

      >ul {
        >li {
          position: relative;
          padding-left: 1.2rem;
          margin-bottom: 4.2rem;
          border-bottom: 1px solid #4e4e4e;

          >.wrap {
            display: flex;
            align-items: center;
            height: $row-height;
            line-height: $row-height;

            >label {
              min-width: 86px;
              font-size: $row-font-size;
              color: #333;
              text-indent: .8rem;
              padding-left: $icon-width;
              background: url("../../assets/images/entrance/icons.png") no-repeat center / $icon-width auto;
            }

            >input {
              flex: 1;
              height: $size-as-parent;
              font-size: $row-font-size;
              color: #000;
              min-width: 0; // hack
            }

            >button{
              width: 78px;
              height: 24px;
              padding: 0 8px;
              font-size: 1.2rem;
              color: $white;
              text-align: center;
              border-radius: 12px;
              background: #c3ebff;

              &.disable {
                color: $white;
                background: #bbb;
              }
            }
          }

          >span {
            position: absolute;
            right: 0;
            top: $size-as-parent;
            color: #e4393c;
          }

          &:nth-of-type(1) > .wrap > label {
            background-position: 0 7px;
          }

          &:nth-of-type(2) > .wrap > label {
            background-position: 0 -51px;
          }

          &:nth-of-type(3) > .wrap > label, &:nth-of-type(4) > .wrap > label {
            background-position: 0 -110px;
          }
        }
      }

      >input {
        width: $size-as-parent;
        height: $confirm-height;
        line-height: $confirm-height;
        font-size: 1.8rem;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        background: #0097ff;
      }
    }
  }
</style>
